<template>
  <template v-if="isShowBalloon"> 气泡</template>
  <template v-else>
    <tspan v-for="item in arrayList" :key="item.key" v-bind="item">{{item.value}}</tspan>
  </template>
</template>

<script setup>
import { ref, computed } from 'vue';
// import { Balloon, Button } from '@alifd/next';

import Custom_Variable from '../CUSTOM';

const props = defineProps({

config: Object,
});

let isShowBalloon = ref(false);

// // let showValue = ref("");
// const showValue = computed(() => {



//     // (array.length>0&&seq< length-1?array.slice(0, array.length-1):array).map(item=>item)

//     retrun ""

// });

let arrayList = ref([]);

onMounted(() => {

    const {value, spaceMark, isShowBalloon, seq, length, specialShow, beforeValue, afterValue, style, curY, threeValue} = props.config;
    const fontSize = (style.fontSize||12)-0+4;
    const hasBeforeValue = ![null, undefined, ''].includes(beforeValue);
    const hasAfterValue = ![null, undefined, ''].includes(afterValue);
    const hasThreeValue = ![null, undefined, ''].includes(threeValue);


    let array = []

    let Enema = {};

    if(Custom_Variable.isEnema){

        Enema = {
            key:4,
            ...curProps,
            dx:-2,
            dy:3,
            style:{cursor: 'pointer', transform: 'translateY(0.8mm)'},
            value:(hasThreeValue?threeValue:'0')+"E"
        }

        // Enema = <tspan key={4} {...curProps} dx={-2} dy={3} style={{cursor: 'pointer', transform: 'translateY(0.8mm)'}}>{hasThreeValue?threeValue:'0'}E</tspan>
    }else{
        Enema = {
            key:4,
            ...curProps,
            dx:-2,
            dy:3,
            style:{cursor: 'pointer', transform: 'translateY(0.8mm)'},
            value:"E"
        }
        {/* Enema = <tspan key={4} {...curProps} dx={-2} dy={3} style={{cursor: 'pointer', transform: 'translateY(0.8mm)'}}>E</tspan> */}
    }

 
    if (specialShow) {

        array = [
            {
                key:1,
                ...curProps,
                dx:0,
                dy:0,
                fill:!hasBeforeValue?'transparent': '',
                style:{cursor: 'pointer', fontSize: fontSize},
                value:hasBeforeValue?beforeValue:'0'
            },
            {
                key:5,
                ...curProps,
                dx:0,
                dy:0,
                fill:'transparent',
                style:{cursor: 'pointer', fontSize: fontSize},
                value:hasBeforeValue?beforeValue:'0'
            },
            {
                key:2,
                ...curProps,
                dx:0,
                dy:-3,
                fill:!hasBeforeValue?'transparent': '',
                style:{cursor: 'pointer', transform: 'translateY(-0.8mm)'},
                value:hasAfterValue?afterValue:'0'
            },
            {
                key:3,
                ...curProps,
                dx:-2,
                dy:3,
                fill:!hasBeforeValue?'transparent': '',
                style:{fontSize: 16, cursor: 'pointer'},
                value:'/'
            },
            Enema

        ]

            if(seq<length - 1 ){
                array.push(
                    {
                        key:5,
                        dx:2,
                        dy:-3,
                        value:spaceMark
                    }
                )
            }else{
                array.push({})
            }


    //     array = [
    //         <tspan key={1} {...curProps} dx={0} dy={0} fill={!hasBeforeValue?'transparent': ''} style={{cursor: 'pointer', fontSize: fontSize}}>{hasBeforeValue?beforeValue:'0'}</tspan>,
    //         <tspan key={5} {...curProps} dx={0} dy={0} fill={'transparent'}>0</tspan>,
    //         <tspan key={2} {...curProps} dx={0} dy={-3} fill={!hasAfterValue?'transparent': ''} style={{cursor: 'pointer', transform: 'translateY(-0.8mm)'}}>{hasAfterValue?afterValue:'0'}</tspan>,
    //         <tspan key={3} {...curProps} dx={-2} dy={3} style={{fontSize: 16, cursor: 'pointer'}}>/</tspan>,
    //         Enema,
    //         // <tspan key={4} {...curProps} dx={-2} dy={3} style={{cursor: 'pointer', transform: 'translateY(0.8mm)'}}>E</tspan>,
    //         // <tspan key={4} {...curProps} dx={-2} dy={3} style={{cursor: 'pointer', transform: 'translateY(0.8mm)'}}>{hasThreeValue?threeValue:'0'}E</tspan>,
    //         seq < length - 1 ? <tspan key={5} dx={2} dy={-3}>{spaceMark}</tspan> : '',
    //     ]
    }else{


        array=[
        {
                key:1,
                ...curProps,
                dy:0,
                style:{cursor: 'pointer'},
                value:value+(seq < length - 1 ? spaceMark : '')
            }
        ]

    //     array = [
    //         <tspan
    //             key={1}
    //             style={{cursor: 'pointer'}}
    //             {...curProps}
    //             dy={0}
    //         >
    //             {value}{seq < length - 1 ? spaceMark : ''}
    //         </tspan>
    //         ]
    }


    if (array.length>0&&seq< length-1) {
        array.slice(0, array.length-1)
    }

    arrayList.value = array;

    // (array.length>0&&seq< length-1?array.slice(0, array.length-1):array).map(item=>item)



});




</script>

<style scoped>
/* 可以添加样式 */
</style>
